<template>
  <yd-ls-layout :onhead=false>

    <div class="head-img" @click="aboutMe">
      <div class="my-id-pic"></div>
      <div class="my-info cf">
        <div class="my-img-wrap">
          <span class="my-img"><img :src="meInfo.head"></span>
        </div>
        <div class="my-person-info">
          <p class="my-jd-head-name">{{ meInfo.name }}</p>
          <div class="my-jd-head-member">
            <span class="my-jd-head-type">亲爱的{{ meInfo.name }}，您好！</span>
          </div>
        </div>
        <div class="head-meassage yd-ls-me-arrow"></div>
      </div>
    </div>

    <yd-ls-title lftit="我的钱包"></yd-ls-title>
    <yd-grids-group class="yd-ls-me-grids" :rows="4">
      <yd-grids-item link="/account">
        <yd-icon slot="icon" name="feedback" color="#FF685D"></yd-icon>
        <span slot="text">我的账单</span>
      </yd-grids-item>
      <yd-grids-item link="/points">
        <yd-icon slot="icon" color="#FF685D" name="creditssolid" custom></yd-icon>
        <span slot="text">我的积分</span>
      </yd-grids-item>
    </yd-grids-group>

    <yd-ls-title lftit="我的服务"></yd-ls-title>
    <yd-grids-group class="yd-ls-me-grids" :rows="4">
      <yd-grids-item link="/subscribe">
        <yd-icon slot="icon" color="#FF685D" name="yuyue" custom></yd-icon>
        <span slot="text">我的预约<i class="yd-tabbar-dot" v-if="visitUnread"></i></span>
      </yd-grids-item>
      <yd-grids-item type="a" :link="goShopOrder">
        <yd-icon slot="icon" name="order" color="#FF685D"></yd-icon>
        <span slot="text">购药订单</span>
      </yd-grids-item>
    </yd-grids-group>


    <div style="margin-top: .15rem">
      <yd-cell-group class="yd-ls-me-group">
        <yd-cell-item arrow  type="link" href="/contact">
          <yd-icon slot="icon" name="phone1" size=".42rem" color="#FF685D"></yd-icon>
          <span slot="left">联系客服</span>
        </yd-cell-item>
        <yd-cell-item arrow type="link" href="/setting">
          <yd-icon slot="icon" name="setting" size=".42rem" color="#FF685D"></yd-icon>
          <span slot="left">设置</span>
        </yd-cell-item>
      </yd-cell-group>
    </div>
  </yd-ls-layout>
</template>


<style>

  .yd-ls-me-grids .yd-tabbar-dot {
    top: 20px;
    left:62px;
  }
  .yd-ls-me-grids .yd-grids-item:after {
    border-bottom: 0;
  }

  .yd-ls-me-group .yd-cell-left span {
    font-weight: inherit;
  }

  .head-img {
    width: 100%;
    color: #FFF;
    position: relative;
  }

  .head-img .my-id-pic {
    height: 120px;
    width: 100%;
    position: absolute;
    overflow: hidden;
    background-color: rgb(72, 112, 243);
  }

  .head-img .my-info {
    margin: 0 15px 7px 4px;
    padding-top: 15px;
    z-index: 20;
    font-size: 0;
    position: relative;
  }

  .head-img .my-img-wrap {
    display: inline-block;
    width: 76px;
    height: 80px;
    position: relative;
    vertical-align: middle;
    margin-right: 4px;
  }

  .head-img .my-img-border {
    display: inline-block;
    overflow: hidden;
    width: 76px;
    height: 80px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 25;
  }

  .head-img .my-img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-block;
    overflow: hidden;
    position: absolute;
    top: 12px;
    left: 10px;
    z-index: 1;
  }

  .head-img .my-img img {
    width: 100%;
    height: 100%;
  }

  .head-img .my-person-info {
    display: inline-block;
    vertical-align: middle;
    height: 80px;
  }

  .head-img .my-person-info .my-jd-head-name {
    font-size: 17px;
    line-height: 17px;
    height: 17px;
    margin-top: 20px;
    margin-bottom: 10px;
  }

  .head-img .my-person-info .my-jd-head-member {
    display: inline-block;
  }

  .head-img .my-person-info .my-jd-head-type {
    display: inline-block;
    font-size: 13px;
    line-height: 13px;
    margin-right: 10px;
    vertical-align: middle;
  }

  .head-img .my-person-info .my-jd-head-plus {
    display: inline-block;
    font-size: 11px;
    height: 20px;
    line-height: 18px;
    vertical-align: middle;
    border: 1px solid rgba(76,74,72,0.5);
    border-radius: 10px;
    box-sizing: border-box;
    background-color: rgba(76,74,72,0.3);
  }

  .head-img .my-person-info .my-jd-head-plus span {
    display: inline-block;
  }

  .my-jd-head-plus .plus-icon-wrap {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #4c4a48;
    position: relative;
    vertical-align: top;
  }

  .my-jd-head-plus .plus-icon-wrap .plus-icon {
    width: 11px;
    height: 8px;
    position: absolute;
    top: 5px;
    left: 3px;
  }

  .my-jd-head-plus .plus-icon-text {
    margin-left: 4px;
    margin-right: 4px;
  }

  .my-jd-head-plus .info-hint {
    margin-right: 5px;
  }

  .head-meassage {
    position: absolute;
    right: 0;
    top: 50px;
  }

  .head-meassage span {
    display: inline-block;
    vertical-align: middle;
  }

  .head-meassage-name {
    font-size: 11px;
    color: #e3e5e9;
    line-height: 12px;
    margin-right: 10px;
  }

  .yd-ls-me-arrow:after {
    margin-left: .05rem;
    margin-right: -.08rem;
    display: block;
    font-family: YDUI-INLAY;
    font-size: .34rem;
    color: #FFF;
    content: "\E608";
  }
</style>
<script>
  import ydLsLayout from '../../../components/yd-ls-layout.vue'
  import ydLsTitle from '../../../components/yd-ls-title.vue'
  import api from '../../../axios/api'
  import { mapGetters } from 'vuex'

  export default {
    name: 'me',
    data() {
      return {
        visitUnread: false, // 我的预约红点
        goShopOrder: `${api.shop_host}/TopMallWeb/mOrderAction!myOrderList.action?openid=${localStorage.openId}&start=0&limit=10&ramid=${new Date()}`,
        meInfo: {}
      }
    },
    created() {
      //TODO：多页面传参
      this.$store.dispatch('fetchBarActive', 'me')

      //TODO:初始化数据
      this.getMeInfo()
    },
    methods: {
      init() {

      },
      getMeInfo() {
        this.$dialog.loading.open(api.default_loading_txt);
        this.axios.get(api.me_info)
          .then(m=>{
            let me_info_data = m.data
            this.meInfo = me_info_data.data
            this.$store.dispatch('fetchMeInfo', me_info_data.data)
            this.getMeUnread()
          }).catch(err=>{
            this.$dialog.loading.close()
            this.$dialog.alert({mes: JSON.stringify(err)})
          })
      },
      getMeUnread() {
        this.axios.get(api.me_unread)
          .then(m=>{
            let me_unread_data = m.data
            this.visitUnread = me_unread_data.data.my_visit_unread

            sessionStorage.me_unread =  me_unread_data.data.my_center_unread
            this.$store.dispatch('fetchMeUnread', sessionStorage.me_unread)
            this.getHomeUnread()
          }).catch(err=>{
            this.$dialog.loading.close()
            this.$dialog.alert({mes: JSON.stringify(err)})
          })
      },
      getSeekUnread() {
        this.axios.get(api.seek_unread)
          .then(m=>{
            let seek_unread_data = m.data
            sessionStorage.seek_unread = seek_unread_data.data
            this.$store.dispatch('fetchSeekUnread', sessionStorage.seek_unread)
            this.$dialog.loading.close()
          }).catch(err=>{
            this.$dialog.loading.close()
            this.$dialog.alert({mes: JSON.stringify(err)})
          })
      },
      getHomeUnread() {
        this.axios.get(api.home_unread)
        .then(m=>{
            // 首页底部红点
            let home_unread_data = m.data
            this.isDot = home_unread_data.data.order_unread
            sessionStorage.index_unread = home_unread_data.data.index_unread
            this.$store.dispatch('fetchHomeUnread', sessionStorage.index_unread)
            this.getSeekUnread()
        }).catch(err=>{
            this.$dialog.loading.close()
            this.$dialog.alert({mes: JSON.stringify(err)})
          })
      },
      aboutMe () {
        window.location = "info.html"
        //this.$router.push({path:'info'})
      }
    },
    mounted() {
      this.init()
    },
    components: { ydLsLayout, ydLsTitle }


  }
</script>
